/* eslint-disable no-alert, no-console */
import { Global, css } from '@emotion/react'
import { truthy } from '@gnlab/utils'
import { Button } from 'antd'
import { createRoot } from 'react-dom/client'
import type { AccountForSDK } from '@/sdk/host'

function App() {
  async function getTime() {
    const resp = await window.QunTool.invoke<void, number>('get-time')
    alert(`取得时间戳：${resp}`)
  }

  async function getIsObserving() {
    type Res = { success: true; data: boolean } | { success: false; error: string }
    const resp = await window.QunTool.invoke<void, Res>('get-is-observing')
    if (resp.success) {
      alert(resp.data ? '当前「处于」观察者模式' : '当前「不处于」观察者模式')
      console.log('取得观察者模式状态', resp.data)
    } else {
      alert(`取得观察者模式状态失败：${JSON.stringify(resp)}`)
    }
  }

  async function getAccount() {
    type Res = { success: true; data: AccountForSDK } | { success: false; error: string }
    const resp = await window.QunTool.invoke<void, Res>('get-account')
    if (resp.success) {
      alert(`取得账号信息：${JSON.stringify(resp.data)}`)
      console.log('取得账号信息', resp.data)
    } else {
      alert(`取得账号信息失败：${JSON.stringify(resp)}`)
    }
  }

  async function getQywxList() {
    type Res = { success: true; data: { wxid: string }[] } | { success: false; error: string }
    const resp = await window.QunTool.invoke<void, Res>('get-qywx-list')
    if (resp.success) {
      alert(`取得企业微信列表：${JSON.stringify(resp.data.map(v => v.wxid))}`)
      console.log('取得企业微信列表', resp.data)
    } else {
      alert(`取得企业微信列表失败：${JSON.stringify(resp)}`)
    }
  }

  async function getCurrentContact() {
    const resp = await window.QunTool.invoke<void, unknown>('get-current-contact')
    alert(`取得当前联系人信息：${JSON.stringify(resp)}`)
  }

  async function getCustomerInfo() {
    const resp = await window.QunTool.invoke<void, unknown>('get-customer-info')
    alert(`取得客户信息：${JSON.stringify(resp)}`)
  }

  function sendText() {
    const text = prompt('输入文本内容：', 'test text')
    if (truthy(text)) void window.QunTool.invoke('send-text', text)
  }

  function sendImage() {
    const url = prompt('输入图片 URL：', 'https://cdn1.gnlab.com/quntool/sdk-sample.jpg')
    if (truthy(url)) void window.QunTool.invoke('send-image', url)
  }

  function sendFile() {
    const url = prompt('输入文件 URL：', 'https://cdn1.gnlab.com/quntool/sdk-sample.txt')
    if (truthy(url)) void window.QunTool.invoke('send-file', url)
  }

  function sendVideo() {
    const url = prompt('输入视频 URL：', 'https://cdn1.gnlab.com/quntool/sdk-sample.mp4')
    if (truthy(url)) void window.QunTool.invoke('send-video', url)
  }

  function sendLink() {
    void window.QunTool.invoke('send-link', {
      title: '测试网址',
      desc: '这是一个测试网址',
      url: 'https://baidu.com',
      imageUrl: 'https://cdn1.gnlab.com/quntool/sdk-sample.jpg',
    })
  }

  async function loadMiniprograms() {
    const list = await window.QunTool.invoke<
      void,
      { id: number; title: string; headimg: string }[]
    >('load-miniprograms')
    alert(list.map(mp => `${mp.id}: ${mp.title}`).join('\n'))
  }

  function sendMiniprogram() {
    const id = prompt('输入小程序数字 ID：')
    if (!truthy(id)) return
    void window.QunTool.invoke('send-miniprogram', parseInt(id, 10))
  }

  function sendMiniprogramByData() {
    void window.QunTool.invoke('send-miniprogram-by-data', {
      username: 'gh_3a18fa53cb80@app',
      appid: 'wx723bb5bb25362f6c',
      appname: 'FILA斐乐',
      appicon:
        'http://mmbiz.qpic.cn/mmbiz_png/46BcU7zwLjRbBaxntNGLxCrykKaicEpU5wCVWicibclgEibyrToQyjjMwb80viatkz2S6iaSW1TibU6PicXnHleiaR2QKJQ/640?wx_fmt=png&wxfrom=200',
      title: 'FILA GOLF × McLAREN 联名系列首发，高端运动与英国顶级奢华跑车的碰撞',
      page_path:
        'pages/category/index.html?cate_current=0&share_id_shop=7&gio_share_user_id=09263866916ebd8eb340a9a6f2ca&gioShareId=a36fdd68-893d-4b03-bc13-2c5a8a7ce444&suid=09263866916ebd8eb340a9a6f2ca',
      cover_path:
        '/gnapi/files/Storage/20230615/7c354354b69d476aba50173303c52642/b304d66c-122b-4c3c-b4af-d4cc96264817.png',
    })
  }

  function sendVideonum() {
    const id = prompt('输入视频号数字 ID：')
    if (!truthy(id)) return
    void window.QunTool.invoke('send-videonum', parseInt(id, 10))
  }

  async function batchSend() {
    const minis = await window.QunTool.invoke<void, { id: number }[]>('load-miniprograms')
    const miniId = minis[0]?.id ?? 0

    const videonums = await window.QunTool.invoke<void, { id: number }[]>('load-videonums')
    const videonumId = videonums[0]?.id ?? 0

    void window.QunTool.invoke('batch-send', [
      { type: 'text', data: 'hello，批量消息要开始啦' },
      { type: 'image', data: 'https://cdn1.gnlab.com/quntool/sdk-sample.jpg' },
      { type: 'file', data: 'https://cdn1.gnlab.com/quntool/sdk-sample.txt' },
      { type: 'video', data: 'https://cdn1.gnlab.com/quntool/sdk-sample.mp4' },
      {
        type: 'link',
        data: {
          title: '测试网址',
          desc: '这是一个测试网址',
          url: 'https://baidu.com',
          imageUrl: 'https://cdn1.gnlab.com/quntool/sdk-sample.jpg',
        },
      },
      { type: 'miniprogram', data: miniId },
      { type: 'videonum', data: videonumId },
    ])
  }

  function switchContact() {
    const wxid = prompt('输入 wxid：', '1688850563729569')
    const externalUserId = prompt('输入 externalUserId：', 'wm-h7tCwAAz19bo0Cdc0HLldPnzIxU0w')
    void window.QunTool.invoke('switch-contact', {
      wxid,
      externalUserId,
    })
  }

  return <>
    <Global styles={styles.global}></Global>
    <div css={styles.app}>
      <Button onClick={getTime}>获取时间戳</Button>
      <Button onClick={getIsObserving}>是否处于观察者模式</Button>
      <Button onClick={getAccount}>获取账号信息</Button>
      <Button onClick={getQywxList}>获取已登录企业微信列表</Button>
      <Button onClick={getCurrentContact}>获取当前联系人信息</Button>
      <Button onClick={getCustomerInfo}>获取客户信息</Button>
      <Button onClick={switchContact}>切换联系人</Button>
      <Button onClick={sendText}>发送文本消息</Button>
      <Button onClick={sendImage}>发送图片消息</Button>
      <Button onClick={sendFile}>发送文件消息</Button>
      <Button onClick={sendVideo}>发送视频消息</Button>
      <Button onClick={sendLink}>发送连接</Button>
      <Button onClick={loadMiniprograms}>获取小程序列表</Button>
      <Button onClick={sendMiniprogramByData}>发送小程序（直接传入数据）</Button>
      <Button onClick={sendMiniprogram}>发送小程序</Button>
      <Button onClick={sendVideonum}>发送视频号</Button>
      <Button onClick={batchSend}>批量发送消息</Button>
    </div>
  </>
}

const styles = {
  global: css`
    html,
    body {
      height: 100%;
      padding: 0;
      margin: 0;
      font-size: 14px;
    }
  `,
  app: css`
    padding: 12px;
    button {
      display: block;
      margin-bottom: 16px;
    }
  `,
}

const rootElement = document.getElementById('root')!
createRoot(rootElement).render(<App />)
